<template>
  <div class="subcolumn_nav">
    <ul class="ul">
      <li v-for="item in subcolumn_nav" :key="item.id" class="li" >
        <a v-if="item.is_more_column" class="picker-a" 
        :style="{color: column_id===item.id ? app_tabBar.config.thirdcolor : app_tabBar.config.firstcolor}">
          <picker @change="bindPickerChange($event,item)" :value="item.index_num" :range="item.children" range-key="name">
            <view class="picker">{{item.name}}</view>
          </picker>
        </a>
        <a 
        v-else 
        @click="linkTo(item)"  
        :style="{ color: column_id===item.id ? app_tabBar.config.thirdcolor : app_tabBar.config.firstcolor}">
        {{item.name}}</a>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { navigateToListPage,styles } from '@/utils/index'
export default {
  props:{
    column_id:Object
  },
  computed: {
    ...mapGetters(['subcolumn_nav','app_tabBar']),
  },
  data() {
    return {
    }
  },
  methods: {
    bindPickerChange(e, item) {
      const val = item.children[e.mp.detail.value]
      navigateToListPage(val, this,1)
      item.index_num = e.mp.detail.value
    },
    linkTo(item) {
      navigateToListPage(item, this)
    }
  }
}
</script>
<style lang="scss" scoped>
.subcolumn_nav {
  background: #fff;
  .ul {
    padding: 10px;
    display: flex;
    flex-direction: row;
    overflow-y: scroll;
    text-align: center;
    width: 100%;
    .li {
      flex:1;
      &.active {
        a {
          color: #444;
        }
      }
      a {
        display: block;
        padding: 5px 10px;
        font-size: 16px;
        color: #a6a6a6;
        white-space: nowrap;
        &.picker-a {
          display: flex;
          .picker::after {
            margin-right: 0;
            margin-left: 4px;
            margin-top: -3px;
            display: inline-block;
            width: 0;
            height: 0;
            content: '';
            vertical-align: middle;
            border-top: 4px solid;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
          }
        }
      }
    }
  }
}
</style>
